<template>
	<el-main>
		<el-card shadow="never">
			<el-text type="primary" size="large">学员信息</el-text>
			<el-form style="margin-top: 15px;" inline>
				<el-form-item style="width: 200px;margin-right: 10px;">
					<el-autocomplete ref="searchStudentRef" v-model="searchName" :fetch-suggestions="querySearch"
						clearable placeholder="请输入学员姓名/手机号进行搜索" @select="handleSelect" @clear="handleClear">
						<template #="{ item }">
							<div>
								<span>{{ item.name }}</span>
								<span>({{ ['男', '女'].includes(item.gender) ? item.gender : '未知' }})</span>
							</div>
							<div style="display: flex;align-items: center;">
								<el-icon>
									<Iphone />
								</el-icon>
								<span>{{ item.mobile }}</span>
							</div>
							<div style="display: flex;align-items: center;">
								<el-icon>
									<ChatRound />
								</el-icon>
								<span>{{ item.wechat }}</span>
							</div>
						</template>
					</el-autocomplete>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="$router.push('/recruit/consult/add')">创建学员</el-button>
				</el-form-item>
			</el-form>
			<div v-if="selectStudent.id">
				<div style="display: flex;align-items: center;margin-bottom: 20px;">
					<span style="font-size: 30px; font-weight: bold;">{{ selectStudent.name }}</span>
					<el-tag style="margin: 0 5px;">
						{{ ['男', '女'].includes(selectStudent.gender!) ? selectStudent.gender : '未知' }}
					</el-tag>
					<span>{{ selectStudent.mobile }}</span>
				</div>
				<div style="margin: 5px 0;">
					意向课程：<el-tag v-for="item in selectStudent.subjects"> {{ item.subjectName }}</el-tag>
				</div>
				<div>
					意向班级：<el-tag v-for="item in selectStudent.classes"> {{ item.className }}</el-tag>
				</div>
			</div>
		</el-card>
		<el-card style="margin-top: 15px;" shadow="never">
			<el-text type="primary">1</el-text>
		</el-card>
	</el-main>
</template>

<script setup lang="ts">
import { getConsultDetailApi, getConsultPageApi } from '@renderer/api/recruit';
import { RecruitItem } from '@renderer/interface/recruit';
import { ref } from 'vue';

// 搜索框的值
const searchName = ref('')
const searchStudentRef = ref()
// 选中的学员
const selectStudent = ref<Partial<RecruitItem>>({})
// 获取输入建议的方法
const querySearch: any = async (queryString: string, callback: any) => {
	const { code, data } = await getConsultPageApi({ selectName: queryString, isSelf: true })
	if (code !== '200') return

	callback(data.records)
}
// 点击选中建议项后触发
const handleSelect = async (item: RecruitItem | any) => {
	searchName.value = item.name
	searchStudentRef.value.blur()
	// 获取学员详情信息
	const { code, data } = await getConsultDetailApi(item.id)
	if (code !== '200') return

	Object.assign(selectStudent.value, item)
	Object.assign(selectStudent.value, data)
}
// 清除搜索框后
const handleClear = () => {
	selectStudent.value = {}
}
</script>

<style scoped></style>